<template>
<div class="app">
    <div class="box">
      <div class="card-container">
        <img src="@/assets/img/giveheart.png" alt="">
          <div class="content">居家为老服务人员数</div>
          <div class="account">450</div>
        <div class="card-container2">
          <img src="@/assets/img/school.png" alt="">
          <div class="content">社区为老服务人员数 </div>
          <div class="account">165</div>
        </div>
        <div class="card-container">
          <img src="@/assets/img/house.png" alt="">
          <div class="content">社区为老服务人员数 </div>
          <div class="account">188</div>
        </div>
      </div>
    <!-- <a-row type="flex" justify="space-between">
      <a-card :bordered="false">
        <div class="card-container">
          <img src="@/assets/img/giveheart.png" alt="">
          <div class="content">居家为老服务人员数</div>
          <div class="account">450</div>
        </div>
      </a-card>
      <a-card :bordered="false">
        <div class="card-container">
          <img src="@/assets/img/school.png" alt="">
          <div class="content">社区为老服务人员数 </div>
          <div class="account">165</div>
        </div>
      </a-card>
      <a-card :bordered="false">
        <div class="card-container">
          <img src="@/assets/img/house.png" alt="">
          <div class="content">社区为老服务人员数</div>
          <div class="account">881</div>
        </div>
      </a-card>
    </a-row> -->
    <a-row type="flex" justify="space-between" style="margin-top: 24px;">
      <a-card class="center-box">
        <div class="center-top">
          <div class="left">
            <div class="title">人员需求</div>
            <div class="content-list">
              <div class="list-item">
                <span>社工</span>
                <SmileFilled style="color: #27AE92;font-size: 26px;" />
              </div>
              <div class="list-item">
                <span>养老护理员</span>
                <MehFilled style="color: #FF992C;font-size: 26px;" />
              </div>
              <div class="list-item">
                <span>心理咨询师</span>
                <FrownFilled style="color: #FF5C5C;font-size: 26px;" />
              </div>
              <div class="list-item">
                <span>医师</span>
                <MehFilled style="color: #FF992C;font-size: 26px;" />
              </div>
              <div class="list-item">
                <span>护士</span>
                <SmileFilled style="color: #27AE92;font-size: 26px;" />
              </div>
            </div>
          </div>
          <div class="charts-container">
            <div class="title">服务人员资质情况</div>
            <a-row class="chart-row" type="flex" justify="space-between">
              <a-col :span="12">
                <socialWorkerChart style="height: 100%;"></socialWorkerChart>
              </a-col>
              <a-col :span="12">
                <personType style="height: 100%;"></personType>
              </a-col>
            </a-row>
            <!-- 二层 -->
            <a-row class="chart-row" type="flex" justify="space-between">
              <a-col :span="8">
                <zhuYuan style="height: 100%;"></zhuYuan>
              </a-col>
              <a-col :span="8">
                <dengJi style="height: 100%;"></dengJi>
              </a-col>
              <a-col :span="8">
                <jiNeng style="height: 100%;"></jiNeng>
              </a-col>
            </a-row>
            <!-- 三层 -->
          </div>
        </div>
        <div class="center-bottom">
          <a-row class="chart-row" type="flex" justify="space-between">
              <a-col :span="12">
                <buttomEducation style="height: 100%;"></buttomEducation>
              </a-col>
              <a-col :span="12">
                <buttomAge style="height: 100%;"></buttomAge>
              </a-col>
          </a-row>
        </div>
      </a-card>
      <div class="right-box">
        <div class="right-top">
          <p class="right-top-title">服务人员资质情况</p>
          <div class="right-top-centent">
          <!--   <div class="right-top-centent-right">
              <span>老人姓名</span><br>
              <p v-for="(item,index) in LRdata" :key="index">狄影</p>
              <p>谢瑗</p>
            </div>
            <div class="right-top-centent-left">
              <span>服务人员</span><br>
              <p>郭华</p>
              <p>刘强东</p>
            </div> -->
            <div class="right-top-centent-right">
              <span>老人姓名</span><br>
              <p>郭华</p>
              <p>刘强东</p>
              <p>郭华</p>
              <p>刘强东</p>
              <p>郭华</p>
              <p>郭华</p>
              <p>刘强东</p>
            </div>
            <div class="right-top-centent-left">
              <span>服务人员</span><br>
              <p>郭华</p>
              <p>刘强东</p>
              <p>郭华</p>
              <p>刘强东</p>
              <p>郭华</p>
              <p>刘强东</p>
              <p>郭华</p>
            </div>
          </div>
        </div>
        <div class="right-middle">
          <p class="right-top-title">老年食堂</p>
          <div class="right-middle-conten">
            <div class="imgs"><img src="../../assets/imgs/kyZX.png" alt=""></div>
            <div class="right-middle-conten-text">
              <p>区域代码 031200</p>
              <p>地址 大洋街道大洋西路26号</p>
              <p>简介 这个养老院非常的好，非常的人性化不少明星都在这住非常奶思。</p>
              <p>联系电话 18766547788</p>
            </div>
          </div>
          <div class="right-bottom">
            <div class="right-bottom-top">
              <p>公益性岗位服务人员数</p>
              <div class="imgs">
                <imgPerson :amount="73"/><span>73</span>
              </div>
            </div>
            <div class="right-bottom-content">
              <p>其他服务人员数</p>
              <div class="imgs">
                <imgPerson :amount="53"/><span>52</span>
              </div>
            </div>
            <div class="right-bottom-bottom">
              <p>政府购买服务人员数</p>
              <div class="imgs">
                <imgPerson :amount="100"/><span>743</span>
              </div>
            </div>
          </div>          
        </div>
      </div>
    </a-row>
    </div>
    <div>
      <Right></Right>
    </div>
</div>

</template>
<script setup lang="ts">
  import {
  SmileFilled,
  MehFilled,
  FrownFilled
} from '@ant-design/icons-vue';
  import Right from '../../components/right/index.vue'
  import socialWorkerChart from './components/socialWorkerChart.vue'
  import personType from './components/personType.vue'
  import zhuYuan from './components/zhuYuan.vue'
  import dengJi from './components/dengJi.vue'
  import jiNeng from './components/jiNeng.vue'
  import buttomEducation from './components/buttomEducation.vue'
  import buttomAge from './components/buttomAge.vue'
  import imgPerson from './components/icon.vue'
  const LRdata = [
    {name:'耿影'}, {name:'耿影'}, {name:'耿影'}, {name:'耿影'}, {name:'耿影'},
  ]
</script>
<style lang="less" scoped>
.app{
  display: flex;
}
  .box {
    width: 1340px;
    height: 1379px;
    margin-right: 24px;
    // width: 100%;
    :deep(.ant-card-body) {
      padding: 0;
    }
  }
  .card-container {
    font-weight: bold;
    background-color: #fff;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    .content, .account {
      color: #333;
      font-size: 20px;
      &:last-child {
        margin-left: 16px;
      }
    }
    img {
      width: 30px;
      height: 30px;
      margin-right: 24px;
    }
  }
  .card-container2 {
    margin-left: 130px;
    margin-right: 130px;  
    font-weight: bold;
    background-color: #fff;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    .content, .account {
      color: #333;
      font-size: 20px;
      &:last-child {
        margin-left: 16px;
      }
    }
    img {
      width: 30px;
      height: 30px;
      margin-right: 24px;
    }
  }
  .center-box {
    width: 1340px;
    height: 747px;
    background: #fff;
    box-sizing: content-box;
    .title {
      color: #333;
      font-size: 20px;
      font-weight: bold;
    }
    .center-top {
      height: 442px;
      padding: 24px;
      box-sizing: border-box;
      display: flex;
    }
    .center-bottom {
      height: 310px;
      padding: 24px;
      box-sizing: border-box;
      .chart-row {
        height: 280px;
      }
    }
    .left {
      width: 240px;
      text-align: right;
      padding-right: 43px;
      box-sizing: border-box;
      .content-list {
        .list-item {
          font-size: 18px;
          color: #333;
          margin: 30px 0;
          display: flex;
          align-items: center;
          span:first-child {
            flex: 1;
          }
          :deep(.anticon) {
            width: 26px;
            margin-left: 18px;
          }
        }
      }
    }
    .charts-container {
      flex: 1;
      .chart-row {
        height: 145px;
        margin-top: 40px;
      }
      .title {
        text-align: center;
      }
    }
  }
  .right-box {
    width: 572px;
    height: 747px;
    margin-top: 20px;
    display: flex;
    .right-top{
      margin-right: 8px;
      width: 665px;
      height: 509px;
      margin-bottom: 24px;
      background: #FFFFFF;
      border-radius: 2px;
      // border: 1px solid #EBEBEB;
      .right-top-title{
        margin-top: 12px;
        margin-left: 24px;
        margin-bottom: 0;
        width: 160px;
        height: 28px;
        font-size: 20px;
        font-weight: 500;
        color: #333333;
        font-weight: bold;
      }
      .right-top-centent{
        display: flex;
        .right-top-centent-right{
          margin-top: 29px;
          font-weight: bold;
          font-size: 14px;
          color: #2B1F1F;
          text-align: center;
          margin-left: 24px;
          width: 262px;
          p{
            font-size: 14px;
            margin-top: 31px;
            color: rgba(0, 0, 0, 0.65);
          }
        }
        .right-top-centent-left{
          margin-top: 29px;
          font-weight: bold;
          font-size: 14px;
          color: #2B1F1F;
          text-align: center;
          margin-right: 24px;
          width: 262px;
        p{
            font-size: 14px;
            margin-top: 31px;
            color: rgba(0, 0, 0, 0.65);
          }
        }
      }
    }
    .right-middle{
      width: 665px;
      height: 509px;
      margin-bottom: 24px;
      background: #FFFFFF;
      border-radius: 2px;
      // border: 1px solid #EBEBEB;
      .right-top-title{
        margin-left: 115px;
        margin-top: 12px;
        margin-bottom: 8px;
        width: 160px;
        height: 28px;
        font-size: 20px;
        font-weight: 500;
        color: #333333;
        font-weight: bold;
      }
      .right-middle-conten{
        display: flex;
        .imgs{
          width: 179px;
          height: 179px;
          background: #D8D8D8;
          border-radius: 4px;
          margin-right: 26px;
          margin-left: 115px;
          img{
            width: 100%;
            height: 100%;
          }
        }
        .right-middle-conten-text{
          flex: 1;
          margin-right: 24px;
          color: #442;
          font-size: 16px;
          p{
            margin-bottom: 12px;
          }
        }
      }
    }
    .right-bottom{
      width: 572px;
      height: 234px;
      background: #FFFFFF;
      border-radius: 2px;
      // border: 1px solid #EBEBEB;
      .right-bottom-top{
        margin-top: 16px;
      }
      .right-bottom-bottom{
        margin-bottom: 12px;
      }
      div{
        height: 68px;
        margin-left: 115px;
        p{
        margin-bottom: 16px;
        margin: 0px;
        height: 22px;
        font-size: 16px;
        font-weight: bold;
        color: #333333;
        line-height: 22px; 
        }
        .imgs{
          margin-left: -115px;
          display: flex;
          margin-top: 10px;
          width: 100%;
          height: 30px;
          span{
            font-size: 20px;
            font-weight: 500;
            color: #333333;
            line-height: 25px;
            margin-left: 16px;
          }
        }
      }
    }
  }
</style>
